<template>
	<view>
		<my-search @focus="onSearchBarFocus"></my-search>
		<view class="catePage">
			<scroll-view scroll-y class="leftCateList" :style="{height: (windowHeight - 50) + 'px'}" :scrollTop="scrollTop">
				<view :class="['cateItem', activeCateIdx === i ? 'active' : '']" v-for="(item, i) in cateList" :key="i" @click="switchCate(item, i)">
					<text>{{item.cat_name}}</text>
				</view>
			</scroll-view>
			<scroll-view class="cateCategoryList" scroll-y :style="{height: (windowHeight - 50)+ 'px'}" :scrollTop="scrollTop">
				<view  class="cateCategory" v-for="(item, i) in cateSecond.children" :key="i">
					<view class="cateTitle"><text space="ensp">/ {{item.cat_name}} /</text></view>
					<view class="cateChildren">
						<view class="cateCategoryItem" v-for="(item1, i1) in item.children" :key="i1" @click="navigateToDetail(item1)">
							<image :src="item1.cat_icon"/>
							<text>{{item1.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	
</template>

<script>
	
	import { $http } from '@escook/request-miniprogram';
	
	export default {
		data() {
			return {
				windowHeight: 0,
				cateList: [],
				cateSecond: {},
				activeCateIdx: 0,
				scrollTop: 0
			}
		},
		onShow: function() {
			const info = uni.getSystemInfoSync();
			this.windowHeight = info.windowHeight;
		},
		onLoad: function() {
			this.getCateList();
		},
		methods: {
			getCateList: async function() {
				const {data: res} = await $http.get('/categories');
				if (!res || res.meta.status !== 200) {
					return uni.$baseShowMsg();
				}
				this.cateList = res.message;
				if (this.cateList.length) {
					this.cateSecond = this.cateList[0];
					this.activeCateIdx = 0;
				}
			},
			switchCate: function(item, idx) {
				this.cateSecond = item;
				this.activeCateIdx = idx;
				this.scrollTop = this.scrollTop ? 0 : 1;
			},
			navigateToDetail: function(item) {
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
				});
			},
			onSearchBarFocus: function() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
.catePage {
	display: flex;
}
.cateItem {
	position: relative;
	font-size: 24rpx;
	color: #313131;
	padding: 40rpx 0;
	text-align: center;
	background-color: #f7f7f7;
}
.cateItem.active {
	background-color: #fff;
	color: #0a0a09;
	&:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 2px;
		height: 50%;
		transform: translateY(-50%);
		background-color: #c00000;
	}
}
.leftCateList {
	width: 100px;
}
.cateCategoryList {
	box-sizing: border-box;
	padding: 15rpx 0;
}
.cateChildren {
	display: flex;
	flex-wrap: wrap;
}
.cateTitle {
	font-size: 28rpx;
	color: #080808;
	font-weight: bold;
	padding: 30rpx 0;
	text-align: center;
}
.cateCategoryItem {
	width: 33.33%;
	overflow: hidden;
	text-align: center;
	color: #2c2c2c;
	image {
		display: block;
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;
	}
	font-size: 28rpx;
	margin-bottom: 40rpx;
}


</style>
